<script setup lang="tsx">
import { reactive, onMounted, ref, nextTick } from 'vue'
import { HttpCodeEnum } from '@packages/share/enums'
import { getAssetCVEAPI, getAssetDetailsCVEAPI } from '@/api/search/index'
import { ElCheckbox } from 'element-plus'
import { useTablePage } from '@/hooks/web'

const props = defineProps({
  id: { type: String, required: true }
})
const emit = defineEmits(['detailItem'])
// 根据风险等级返回对应的样式类名
const getRiskLevelClass = (riskLevel: string) => {
  switch (riskLevel) {
    case '超危':
      return 'risk-high';
    case '高危':
      return 'risk-high';
    case '中危':
      return 'risk-medium';
    case '低危':
      return 'risk-low';
    default:
      return '';
  }
}
// 是否验证
const isVerified = ref(false)
const { table, page, ruleForm, getRecords } = useTablePage(getAssetCVEAPI, { ruleForm: { id: props.id, isVerified: isVerified.value }, isMounted: false })

const ruleTable = reactive({
  columns: [
    { label: '序号', width: 100, type: 'index' },
    { label: '漏洞编号', prop: 'number' },
    { label: '发现日期', prop: 'time' },
    {
      label: '漏洞等级',
      prop: 'level',
      render: ({ row }) => (
        <span class={getRiskLevelClass(row.level)}>{row.level}</span>
      )
    },
    { label: '漏洞名称', prop: 'name' },
    {
      label: '操作',
      width: 200,
      render: ({ row }) => (
        <div>
          <span
            class="click"
            onClick={() => {
              openDetail(row)
            }}
          >
            详情
          </span>
        </div>
      )
    }
  ]
})

// 是否验证切换
const changeVerify = () => {
  ruleForm.isVerified = isVerified.value
  getRecords()
}
// 详情
const openDetail = (row) => {
  getAssetDetailsCVEAPI(row.number).then((res) => {
    const { code, data } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      emit('detailItem', data)
    }
  })
}
onMounted(() => {
  getRecords()
})
</script>
<template>
  <!-- 是否验证判断 -->
  <div class="verify">
    <!-- <el-checkbox v-model="isVerified" label="是否验证" @change="changeVerify" /> -->
  </div>
  <!-- 漏洞列表 -->
  <jmp-table :data="table.records" :columns="ruleTable.columns" :loading="table.loading" />
  <!-- 分页 -->
  <jmp-pagination v-model:page="page.pageNum" v-model:limit="page.pageSize" v-model:total="page.total" />
</template>
<style scoped lang="scss">
.verify {
  display: flex;
  justify-content: right;
}
:deep(.risk-high) {
  color: #b84337 !important;
}
:deep(.risk-medium) {
  color: #e3c55f !important;
}
:deep(.risk-low) {
  color: #578dc9 !important;
}
</style>
